<script setup lang="ts">
import { ref } from 'vue'
import type { previewImgType } from './type'

const imgList = ref<previewImgType[]>([
  { id: '1', path: './images/comp/colorui/1.png' },
  { id: '2', path: './images/comp/colorui/2.png' },
  { id: '3', path: './images/comp/colorui/3.png' },
  { id: '4', path: './images/comp/colorui/4.png' }
])
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1、组件简介</div>
        <div class="doc-text">
          <div class="text">1.1 所属项目 - 会员小程序</div>
        </div>
        <div class="doc-text">
          <div class="text">1.2 路径 - 无需引入（全局已引入css文件）</div>
        </div>
        <div class="doc-text">
          <div class="text">
            1.3 功能 - ColorUI是一个Css类的UI组件库！在你引入样式后可以根据class来调用组件
            ,不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互。
          </div>
        </div>
        <div class="doc-text">
          <div class="text">1.4 外链地址：</div>
          <div class="text" style="padding-left: 25px">
            ColorUI Github地址 - https://github.com/weilanwl/ColorUI
          </div>
          <div class="text" style="padding-left: 25px">
            ColorUI 插件市场 - https://ext.dcloud.net.cn/plugin?id=239
          </div>
          <div class="text" style="padding-left: 25px">
            ColorUI 在线展示 - https://miren123.gitee.io/colorui-h5
          </div>
          <div class="text" style="padding-left: 25px">
            ColorUI 第三方文档 - https://miren123.gitee.io/colorui-document/pages/base/
          </div>
        </div>
        <div class="doc-text">
          <div class="text">1.5 组件预览</div>
          <div class="image flex-h-sc">
            <a-image-preview-group>
              <div class="img" v-for="item in imgList" :key="item.id">
                <a-image class="img" :width="100" :src="item.path" />
              </div>
            </a-image-preview-group>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2、使用方法（示例代码）</div>
        <div class="doc-text">
          <div class="text">
            <pre><code class="vue">&lt;button class="cu-btn round bg-red shadow"&gt;按钮&lt;/button&gt;</code></pre>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
      .image {
        @include size(100%, 100%);
        .img {
          max-width: 150px;
          margin-right: 20px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
